<!--
 * @Descripttion: 
 * @version: 
 * @Author: by
 * @Date: 2021-10-21 16:27:37
 * @LastEditors: tc
 * @LastEditTime: 2022-03-15 11:17:00
-->
<template>
    <div class="middlebox">
        <div class="bubble">
            <div class="Bubble-ball ball01">
                <div class="ball-top">
                    <img src="@/assets/img/dashboard/温湿压.png" alt="">
                    <span class="title">温湿压</span> 
                </div>
                <div class="text-middle">
                    <span class="title-ty">正常</span><span class="normal">{{data != null?data.Warmnormal:'--'}}</span>
                </div>
                <div class="text-bottom">
                    <span class="title-ty">异常</span><span class="abnormal">{{data != null?data.warmWet:'--'}}</span>
                </div>
            </div>
            <div class="Bubble-ball ball02">
                <div class="ball-top">
                    <img src="@/assets/img/dashboard/地质-传感器.png" alt="">
                    <span class="title">地质</span> 
                </div>
                <div class="text-middle">
                    <span class="title-ty">正常</span><span class="normal">{{data != null?data.Geologynormal:'--'}}</span>
                </div>
                <div class="text-bottom">
                    <span class="title-ty">异常</span><span class="abnormal">{{data != null?data.geologyWarn:'--'}}</span>
                </div>
            </div>
            <div class="Bubble-ball ball03">
                <div class="ball-top">
                    <img src="@/assets/img/dashboard/渗压-传感器.png" alt="">
                    <span class="title">渗压</span> 
                </div>
                <div class="text-middle">
                    <span class="title-ty">正常</span><span class="normal">{{data != null?data.Osmnormal:'--'}}</span>
                </div>
                <div class="text-bottom">
                    <span class="title-ty">异常</span><span class="abnormal">{{data != null?data.osmWarn:'--'}}</span>
                </div>
            </div>
            <div class="Bubble-ball ball04">
                <div class="ball-top">
                    <img src="@/assets/img/dashboard/摄像头-传感器.png" alt="">
                    <span class="title">摄像头</span> 
                </div>
                <div class="text-middle">
                    <span class="title-ty">正常</span><span class="normal">{{data != null?data.Cameranormal:'--'}}</span>
                </div>
                <div class="text-bottom">
                    <span class="title-ty">异常</span><span class="abnormal">{{data != null?data.cameraWarn:'--'}}</span>
                </div>
            </div>
            <div class="Bubble-ball ball05">
                <div class="ball-top">
                    <img src="@/assets/img/dashboard/降水-传感器.png" alt="">
                    <span class="title">降水</span> 
                </div>
                <div class="text-middle">
                    <span class="title-ty">正常</span><span class="normal">{{data != null?data.Rainnormal:'--'}}</span>
                </div>
                <div class="text-bottom">
                    <span class="title-ty">异常</span><span class="abnormal">{{data != null?data.rainWarn:'--'}}</span>
                </div>
            </div>
            <div class="Bubble-ball ball06">
                <div class="ball-top">
                    <img src="@/assets/img/dashboard/水位-传感器.png" alt="">
                    <span class="title">水压</span> 
                </div>
                <div class="text-middle">
                    <span class="title-ty">正常</span><span class="normal">{{data != null?data.Shuinormal:'--'}}</span>
                </div>
                <div class="text-bottom">
                    <span class="title-ty">异常</span><span class="abnormal">{{data != null?data.shuiWarn:'--'}}</span>
                </div>
            </div>
        </div>
        <div class="video-ty video-ty01">
            <video class="video-ya" preload="auto" autoplay="autoplay" ref="videos" muted loop src="@/assets/img/dashboard/move.webm"></video>
        </div>
        <div class="video-ty video-ty02">
            <video class="video-ya" preload="auto" autoplay="autoplay" ref="videos" muted loop src="@/assets/img/dashboard/particle.webm"></video>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        data: {
            default: () => {}
        }
    },
    data() {
        return {

        }
    },
    watch: {
        data: {
            handler(val) {
                // this.currentInfo = val[0]
                // this.renderData(val)
            },
            deep:true
        }
    },
    mounted() {
    },
    unmounted() {

    },
    methods: {
       
    }
}
</script>

<style lang="scss" scoped>
.middlebox {
    height: 100%;
    // padding: 7% 20px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    .bubble {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
        .Bubble-ball {
            width: 146px;
            height: 146px;
            position: absolute;
            background: url("../../assets/img/dashboard/球.png") no-repeat;
            background-size: contain;
            display: flex;
            flex-flow: column;
            justify-content: center;
            padding-left: 30px;
            padding-right: 5px;
            box-sizing: border-box;
            >div {
                display: flex;
                align-items: center;
                color: #fff;

                .title {
                    font-size: 18px;
                    font-weight: bold;
                    margin-left: 10px;
                }
                .normal {
                    width: 66px;
                    font-family: digital-7;
                    font-weight: bold;
                    font-size: 20px;
                    color: #00F411;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    word-break: break-all;
                }
                .abnormal {
                    width: 66px;
                    font-family: digital-7;
                    font-weight: bold;
                    font-size: 20px;
                    color: #FF3200;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    word-break: break-all;
                }
                .title-ty {
                    font-size: 14px;
                    font-weight: bold;
                    padding: 2px 5px;
                    background: rgba(100, 255, 0, 0);
                    border: 1px solid rgba(255, 255, 255, 0.4);
                    border-radius: 2px;
                    margin-right: 5px;
                }
            }
            .ball-top {
                margin-bottom: 5px;
            }
            .text-middle{
                margin-bottom: 7px;
            }
        }
        .ball01 {
            left: 444px;
            top: 164px;
            animation:turn 10s linear infinite;
        }
        .ball02 {
            left: 240px;
            top: 250px;
            animation:turn 12s linear infinite;
        }
        .ball03 {
            left: 584px;
            top: 299px;
            animation:turn 14s linear infinite;
        }
        .ball04 {
            left: 358px;
            top: 428px;
            animation:turn 16s linear infinite;
        }
        .ball05 {
            left: 171px;
            top: 556px;
            animation:turn 18s linear infinite;
        }
        .ball06 {
            left: 642px;
            top: 566px;
            animation:turn 20s linear infinite;
        }
        @keyframes turn{
            0%{transform: translate(0px,0px);}
            25%{transform: translate(-5px,0px);}
            50%{transform: translate(-5px,-5px);}
            75%{transform: translate(0px,-5px);}
            100%{transform: translate(0px,0px);}
        }
    }
    .video-ty {
        position: absolute;
        box-sizing: border-box;
        mix-blend-mode: screen;
        .video-ya {
            object-fit:fill;
            width: 100%;
        }
    }
    .video-ty01 {
        left: 88px;
        top: 85px;
        width: 85%;
    }
    .video-ty02 {
        left: -119px;
        top: 163px;
        width: 125%;
    }
}
</style>